<template>
    <a-row :gutter="[4, 4]">
        <a-col :span="24">
            <a-row align="middle" :gutter="[8, 8]">
                <a-col :offset="2"></a-col>
                <a-col :span="10" style="text-align: center"> 标题 </a-col>
                <a-col :span="10" style="text-align: center"> 字段绑定 </a-col>
            </a-row>
        </a-col>
        <a-col :span="24">
            <a-list
                item-layout="vertical"
                size="small"
                :pagination="pagination"
                :data-source="data"
            >
                <template #renderItem="{ item, index }">
                    <a-row
                        align="middle"
                        :gutter="[8, 8]"
                        style="margin: 5px 0px"
                    >
                        <a-col :span="2" style="text-align: center">
                            <edit-outlined class="ml-icon" @click="editMore" />
                        </a-col>
                        <a-col :span="10">
                            <a-input v-model:value="item['title']"></a-input>
                        </a-col>
                        <a-col :span="10">
                            <a-input v-model:value="item['dataIndex']">
                            </a-input>
                        </a-col>
                        <a-col :span="2" style="text-align: center">
                            <a class="ml-a-danger">
                                <delete-outlined
                                    @click="value.splice(index, 1)"
                                />
                            </a>
                        </a-col>
                    </a-row>
                </template>
            </a-list>
        </a-col>
        <a-col :offset="2" :span="20" style="text-align: center">
            <a-button block @click="add">
                <plus-circle-outlined />
            </a-button>
        </a-col>

        <a-modal
            v-model:visible="visibleEdit"
            class="custom-class"
            title="列配置"
            width="50%"
        >
            <a-table
                :columns="columns"
                :data-source="data"
                :pagination="{
                    hideOnSinglePage: true,
                }"
            >
                <template #bodyCell="{ column, text, record }">
                    <template
                        v-if="
                            ['dataIndex', 'title', 'align', 'width'].includes(
                                column.dataIndex
                            )
                        "
                    >
                        <div>
                            <a-input
                                v-if="editableData[record.key]"
                                v-model:value="
                                    editableData[record.key][column.dataIndex]
                                "
                            />
                            <template v-else>
                                <span v-if="column.dataIndex === 'align'">
                                    {{ text || "left" }}
                                </span>
                                <span v-if="column.dataIndex === 'width'">
                                    {{ text || "auto" }}
                                </span>
                                <span v-else>
                                    {{ text }}
                                </span>
                            </template>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'isSearch'">
                        <a-switch
                            v-model:checked="record['isSearch']"
                        ></a-switch>
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <div class="editable-row-operations">
                            <span v-if="editableData[record.key]">
                                <a-typography-link @click="save(record.key)"
                                    >保存</a-typography-link
                                >
                                <a-popconfirm
                                    title="Sure to cancel?"
                                    @confirm="cancel(record.key)"
                                >
                                    <a>取消</a>
                                </a-popconfirm>
                            </span>
                            <span v-else>
                                <a @click="edit(record.key)">编辑</a>
                            </span>
                        </div>
                    </template>
                </template>
            </a-table>

            <template #footer>
                <a-space>
                    <a-button @click="visibleEdit = false">确定</a-button>
                </a-space>
            </template>
        </a-modal>
    </a-row>
</template>

<script lang="ts">
import { cloneDeep } from "lodash-es";
import {
    ref,
    defineComponent,
    computed,
    PropType,
    UnwrapRef,
    reactive,
} from "vue";
import {
    EditOutlined,
    DeleteOutlined,
    PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { TableColumnType } from "ant-design-vue";

interface DataItem {
    dataIndex: string;
    title: string;
}

export default defineComponent({
    components: {
        EditOutlined,
        DeleteOutlined,
        PlusCircleOutlined,
    },
    props: {
        value: {
            type: Object as PropType<TableColumnType[]>,
            default: () => [],
        },
    },
    setup(props, { emit }) {
        const pagination = {
            onChange: (page: number) => {},
            pageSize: 10,
            hideOnSinglePage: true,
        };

        const visibleEdit = ref(false);
        const editMore = () => {
            visibleEdit.value = true;
        };

        const data = computed({
            get: () =>
                props.value.filter((item: TableColumnType) => {
                    return item.key != "action";
                }),
            set: (val) => emit("value", val),
        });

        const columns: TableColumnType[] = [
            { dataIndex: "title", width: 250, title: "标题" },
            { dataIndex: "dataIndex", width: 250, title: "数据绑定" },
            {
                dataIndex: "isSearch",
                width: 100,
                title: "查询",
            },
            {
                dataIndex: "width",
                width: 100,
                title: "宽度",
                customRender: ({ text }) => text || "auto",
            },
            {
                dataIndex: "align",
                width: 150,
                title: "对齐",
                customRender: ({ text }) => text || "left",
            },
            { key: "action", title: "操作", width: 120 },
        ];
        const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

        const edit = (key: string) => {
            editableData[key] = cloneDeep(
                data.value.filter((item) => key === item.key)[0]
            );
        };
        const save = (key: string) => {
            Object.assign(
                data.value.filter((item) => key === item.key)[0],
                editableData[key]
            );
            delete editableData[key];
        };
        const cancel = (key: string) => {
            delete editableData[key];
        };

        const add = () => {
            let length = props.value.length;
            props.value.splice(length - 1, 0, {});
        };
        return {
            data,
            columns,
            editableData,

            visibleEdit,
            pagination,
            editMore,

            add,
            edit,
            save,
            cancel,
        };
    },
});
</script>

<style lang="less" scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>